<template>
    <div class="bake">
        <el-dialog
            custom-class="my-dialog"
            :visible.sync="dialog1Visible"
            title="NG预警信息"
            :width="dialogwidth"
            :height="dialogHeight"
            >
            <div class="warningbody">
                <i class="el-icon-warning-outline"></i>&nbsp;烘烤1线扫码NG{{ line1currentValue }}pcs,已达到预警值！
            </div>
        </el-dialog>
        <el-dialog
            custom-class="my-dialog"
            :visible.sync="dialog2Visible"
            title="NG预警信息"
            :width="dialogwidth"
            :height="dialogHeight"
            >
            <div class="warningbody">
                <i class="el-icon-warning-outline"></i>&nbsp;烘烤2线扫码NG{{ line2currentValue }}pcs,已达到预警值！
            </div>
        </el-dialog>
        <el-dialog
            custom-class="my-dialog"
            :visible.sync="dialog3Visible"
            title="NG预警信息"
            :width="dialogwidth"
            :height="dialogHeight"
            >
            <div class="warningbody">
                <i class="el-icon-warning-outline"></i>&nbsp;烘烤3线扫码NG{{ line3currentValue }}pcs,已达到预警值！
            </div>
        </el-dialog>
        <div class="toparea">
            <div class="statuslist">
                <div class="status_description">
                    <img src="../assets/green.png" class="status1">
                    <p class="description">生产</p>
                </div>
                <div class="status_description">
                    <img src="../assets/yellow.png" class="status2">
                    <p class="description">待机</p>
                </div>
                <div class="status_description">
                    <img src="../assets/red.png" class="status3">
                    <p class="description">停机</p>
                </div>
            </div>
            <div class="currenttime">{{ currentTime }}</div>
        </div>
        <div class="mainarea">
            <div class="firstly">
                <div class="title">
                    <p class="title1">运行状态</p>
                    <p class="title2">NG品数据</p>
                </div>
                <div class="statearea">
                    <div class="linearea">
                        <p class="topic">1线</p>
                        <div class="statusarea">
                            <div class="ovens">
                                <div class="line"></div>
                                <div class="oven_area">
                                    <img src="../assets/bake.png" class="oven_icon">
                                    <div class="oven_state">
                                        <p class="oven_name">1#烘箱</p>
                                        <img src="../assets/green.png" class="ovenstatus1" v-show="line1Oven1.isrun">
                                        <img src="../assets/yellow.png" class="ovenstatus2" v-show="line1Oven1.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="ovenstatus3" v-show="line1Oven1.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="oven_area">
                                    <img src="../assets/bake.png" class="oven_icon">
                                    <div class="oven_state">
                                        <p class="oven_name">2#烘箱</p>
                                        <img src="../assets/green.png" class="ovenstatus1" v-show="line1Oven2.isrun">
                                        <img src="../assets/yellow.png" class="ovenstatus2" v-show="line1Oven2.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="ovenstatus3" v-show="line1Oven2.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="oven_area">
                                    <img src="../assets/cool.png" class="oven_icon">
                                    <div class="oven_state">
                                        <p class="oven_name">1#冷却箱</p>
                                        <img src="../assets/green.png" class="coolingstatus1" v-show="line1CoolingBox.isrun">
                                        <img src="../assets/yellow.png" class="coolingstatus2" v-show="line1CoolingBox.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="coolingstatus3" v-show="line1CoolingBox.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="oven_area">
                                    <img src="../assets/bake.png" class="oven_icon">
                                    <div class="oven_state">
                                        <p class="oven_name">3#烘箱</p>
                                        <img src="../assets/green.png" class="ovenstatus1" v-show="line1Oven3.isrun">
                                        <img src="../assets/yellow.png" class="ovenstatus2" v-show="line1Oven3.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="ovenstatus3" v-show="line1Oven3.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="oven_area">
                                    <img src="../assets/bake.png" class="oven_icon">
                                    <div class="oven_state">
                                        <p class="oven_name">4#烘箱</p>
                                        <img src="../assets/green.png" class="ovenstatus1" v-show="line1Oven4.isrun">
                                        <img src="../assets/yellow.png" class="ovenstatus2" v-show="line1Oven4.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="ovenstatus3" v-show="line1Oven4.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                                <div class="line"></div>
                            </div>
                            <div class="robotarea">
                                <div class="linestate">
                                    <div class="robots">
                                        <div class="shortline"></div>
                                        <img src="../assets/load.png" class="robot_icon">
                                        <div class="longline"></div>
                                        <img src="../assets/robot.png" class="robot_icon">
                                        <div class="longline"></div>
                                        <img src="../assets/unload.png" class="robot_icon">
                                        <div class="shortline"></div>
                                    </div>
                                </div>
                                <div class="linestatus">
                                    <div class="robot_state robot1">
                                        <p class="robot_name">上料机械手</p>
                                        <img src="../assets/green.png" class="robotstatus1" v-show="line1load.isrun">
                                        <img src="../assets/yellow.png" class="robotstatus2" v-show="line1load.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="robotstatus3" v-show="line1load.isshutdown" v-if="isFlashing">
                                    </div>
                                    <div class="robot_state robot2">
                                        <p class="robot_name">调度机器人</p>
                                        <img src="../assets/green.png" class="robotstatus1" v-show="line1dispatch.isrun">
                                        <img src="../assets/yellow.png" class="robotstatus2" v-show="line1dispatch.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="robotstatus3" v-show="line1dispatch.isshutdown" v-if="isFlashing">
                                    </div>
                                    <div class="robot_state robot3">
                                        <p class="robot_name">下料机械手</p>
                                        <img src="../assets/green.png" class="robotstatus1" v-show="line1unload.isrun">
                                        <img src="../assets/yellow.png" class="robotstatus2" v-show="line1unload.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="robotstatus3" v-show="line1unload.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="defectarea">
                            <p class="defecttext">扫码NG</p>
                            <div class="chart">
                                <el-progress :text-inside="true" :stroke-width="28" :percentage="progressValue(line1currentValue,maxValue)" :color="progressColor1"></el-progress>
                                <p>{{ line1currentValue }}/{{ maxValue }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="linearea">
                        <p class="topic">2线</p>
                        <div class="statusarea">
                            <div class="ovens">
                                <div class="line"></div>
                                <div class="oven_area">
                                    <img src="../assets/bake.png" class="oven_icon">
                                    <div class="oven_state">
                                        <p class="oven_name">1#烘箱</p>
                                        <img src="../assets/green.png" class="ovenstatus1" v-show="line2Oven1.isrun">
                                        <img src="../assets/yellow.png" class="ovenstatus2" v-show="line2Oven1.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="ovenstatus3" v-show="line2Oven1.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="oven_area">
                                    <img src="../assets/bake.png" class="oven_icon">
                                    <div class="oven_state">
                                        <p class="oven_name">2#烘箱</p>
                                        <img src="../assets/green.png" class="ovenstatus1" v-show="line2Oven2.isrun">
                                        <img src="../assets/yellow.png" class="ovenstatus2" v-show="line2Oven2.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="ovenstatus3" v-show="line2Oven2.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="oven_area">
                                    <img src="../assets/cool.png" class="oven_icon">
                                    <div class="oven_state">
                                        <p class="oven_name">1#冷却箱</p>
                                        <img src="../assets/green.png" class="coolingstatus1" v-show="line2CoolingBox.isrun">
                                        <img src="../assets/yellow.png" class="coolingstatus2" v-show="line2CoolingBox.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="coolingstatus3" v-show="line2CoolingBox.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="oven_area">
                                    <img src="../assets/bake.png" class="oven_icon">
                                    <div class="oven_state">
                                        <p class="oven_name">3#烘箱</p>
                                        <img src="../assets/green.png" class="ovenstatus1" v-show="line2Oven3.isrun">
                                        <img src="../assets/yellow.png" class="ovenstatus2" v-show="line2Oven3.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="ovenstatus3" v-show="line2Oven3.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="oven_area">
                                    <img src="../assets/bake.png" class="oven_icon">
                                    <div class="oven_state">
                                        <p class="oven_name">4#烘箱</p>
                                        <img src="../assets/green.png" class="ovenstatus1" v-show="line2Oven4.isrun">
                                        <img src="../assets/yellow.png" class="ovenstatus2" v-show="line2Oven4.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="ovenstatus3" v-show="line2Oven4.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                                <div class="line"></div>
                            </div>
                            <div class="robotarea">
                                <div class="linestate">
                                    <div class="robots">
                                        <div class="shortline"></div>
                                        <img src="../assets/load.png" class="robot_icon">
                                        <div class="longline"></div>
                                        <img src="../assets/robot.png" class="robot_icon">
                                        <div class="longline"></div>
                                        <img src="../assets/unload.png" class="robot_icon">
                                        <div class="shortline"></div>
                                    </div>
                                </div>
                                <div class="linestatus">
                                    <div class="robot_state robot1">
                                        <p class="robot_name">上料机械手</p>
                                        <img src="../assets/green.png" class="robotstatus1" v-show="line2load.isrun">
                                        <img src="../assets/yellow.png" class="robotstatus2" v-show="line2load.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="robotstatus3" v-show="line2load.isshutdown" v-if="isFlashing">
                                    </div>
                                    <div class="robot_state robot2">
                                        <p class="robot_name">调度机器人</p>
                                        <img src="../assets/green.png" class="robotstatus1" v-show="line2dispatch.isrun">
                                        <img src="../assets/yellow.png" class="robotstatus2" v-show="line2dispatch.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="robotstatus3" v-show="line2dispatch.isshutdown" v-if="isFlashing">
                                    </div>
                                    <div class="robot_state robot3">
                                        <p class="robot_name">下料机械手</p>
                                        <img src="../assets/green.png" class="robotstatus1" v-show="line2unload.isrun">
                                        <img src="../assets/yellow.png" class="robotstatus2" v-show="line2unload.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="robotstatus3" v-show="line2unload.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="defectarea">
                            <p class="defecttext">扫码NG</p>
                            <div class="chart">
                                <el-progress :text-inside="true" :stroke-width="28" :percentage="progressValue(line2currentValue,maxValue)" :color="progressColor2"></el-progress>
                                <p>{{ line2currentValue }}/{{ maxValue }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="linearea">
                        <p class="topic">3线</p>
                        <div class="statusarea">
                            <div class="ovens">
                                <div class="line"></div>
                                <div class="oven_area">
                                    <img src="../assets/bake.png" class="oven_icon">
                                    <div class="oven_state">
                                        <p class="oven_name">1#烘箱</p>
                                        <img src="../assets/green.png" class="ovenstatus1" v-show="line3Oven1.isrun">
                                        <img src="../assets/yellow.png" class="ovenstatus2" v-show="line3Oven1.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="ovenstatus3" v-show="line3Oven1.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="oven_area">
                                    <img src="../assets/bake.png" class="oven_icon">
                                    <div class="oven_state">
                                        <p class="oven_name">2#烘箱</p>
                                        <img src="../assets/green.png" class="ovenstatus1" v-show="line3Oven2.isrun">
                                        <img src="../assets/yellow.png" class="ovenstatus2" v-show="line3Oven2.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="ovenstatus3" v-show="line3Oven2.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="oven_area">
                                    <img src="../assets/cool.png" class="oven_icon">
                                    <div class="oven_state">
                                        <p class="oven_name">1#冷却箱</p>
                                        <img src="../assets/green.png" class="coolingstatus1" v-show="line3CoolingBox.isrun">
                                        <img src="../assets/yellow.png" class="coolingstatus2" v-show="line3CoolingBox.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="coolingstatus3" v-show="line3CoolingBox.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="oven_area">
                                    <img src="../assets/bake.png" class="oven_icon">
                                    <div class="oven_state">
                                        <p class="oven_name">3#烘箱</p>
                                        <img src="../assets/green.png" class="ovenstatus1" v-show="line3Oven3.isrun">
                                        <img src="../assets/yellow.png" class="ovenstatus2" v-show="line3Oven3.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="ovenstatus3" v-show="line3Oven3.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="oven_area">
                                    <img src="../assets/bake.png" class="oven_icon">
                                    <div class="oven_state">
                                        <p class="oven_name">4#烘箱</p>
                                        <img src="../assets/green.png" class="ovenstatus1" v-show="line3Oven4.isrun">
                                        <img src="../assets/yellow.png" class="ovenstatus2" v-show="line3Oven4.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="ovenstatus3" v-show="line3Oven4.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                                <div class="line"></div>
                            </div>
                            <div class="robotarea">
                                <div class="linestate">
                                    <div class="robots">
                                        <div class="shortline"></div>
                                        <img src="../assets/load.png" class="robot_icon">
                                        <div class="longline"></div>
                                        <img src="../assets/robot.png" class="robot_icon">
                                        <div class="longline"></div>
                                        <img src="../assets/unload.png" class="robot_icon">
                                        <div class="shortline"></div>
                                    </div>
                                </div>
                                <div class="linestatus">
                                    <div class="robot_state robot1">
                                        <p class="robot_name">上料机械手</p>
                                        <img src="../assets/green.png" class="robotstatus1" v-show="line3load.isrun">
                                        <img src="../assets/yellow.png" class="robotstatus2" v-show="line3load.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="robotstatus3" v-show="line3load.isshutdown" v-if="isFlashing">
                                    </div>
                                    <div class="robot_state robot2">
                                        <p class="robot_name">调度机器人</p>
                                        <img src="../assets/green.png" class="robotstatus1" v-show="line3dispatch.isrun">
                                        <img src="../assets/yellow.png" class="robotstatus2" v-show="line3dispatch.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="robotstatus3" v-show="line3dispatch.isshutdown" v-if="isFlashing">
                                    </div>
                                    <div class="robot_state robot3">
                                        <p class="robot_name">下料机械手</p>
                                        <img src="../assets/green.png" class="robotstatus1" v-show="line3unload.isrun">
                                        <img src="../assets/yellow.png" class="robotstatus2" v-show="line3unload.isstandby" v-if="isFlashing">
                                        <img src="../assets/red.png" class="robotstatus3" v-show="line3unload.isshutdown" v-if="isFlashing">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="defectarea">
                            <p class="defecttext">扫码NG</p>
                            <div class="chart">
                                <el-progress :text-inside="true" :stroke-width="28" :percentage="progressValue(line3currentValue,maxValue)" :color="progressColor3"></el-progress>
                                <p>{{ line3currentValue }}/{{ maxValue }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="wuliu_runningstate">
                <p class="subtitle">物流线运行状态</p>
                <div class="statearea">
                    <div class="statecontent">
                        <div class="linearea">
                            <div class="linestate">
                                <p class="topic">1线</p>
                                <div class="robots">
                                    <div class="shortline"></div>
                                    <img src="../assets/load.png" class="robot_icon">
                                    <div class="longline"></div>
                                    <img src="../assets/robot.png" class="robot_icon">
                                    <div class="longline"></div>
                                    <img src="../assets/unload.png" class="robot_icon">
                                    <div class="shortline"></div>
                                </div>
                            </div>
                            <div class="linestatus">
                                <div class="robot_state robot1">
                                    <p class="robot_name">上料机械手</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot1.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot1.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot1.isshutdown" v-if="isFlashing">
                                </div>
                                <div class="robot_state robot2">
                                    <p class="robot_name">调度机器人</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot2.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot2.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot2.isshutdown" v-if="isFlashing">
                                </div>
                                <div class="robot_state robot3">
                                    <p class="robot_name">下料机械手</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot3.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot3.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot3.isshutdown" v-if="isFlashing">
                                </div>
                            </div>
                        </div>
                        <div class="linearea">
                            <div class="linestate">
                                <p class="topic">2线</p>
                                <div class="robots">
                                    <div class="shortline"></div>
                                    <img src="../assets/load.png" class="robot_icon">
                                    <div class="longline"></div>
                                    <img src="../assets/robot.png" class="robot_icon">
                                    <div class="longline"></div>
                                    <img src="../assets/unload.png" class="robot_icon">
                                    <div class="shortline"></div>
                                </div>
                            </div>
                            <div class="linestatus">
                                <div class="robot_state robot1">
                                    <p class="robot_name">上料机械手</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot1.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot1.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot1.isshutdown" v-if="isFlashing">
                                </div>
                                <div class="robot_state robot2">
                                    <p class="robot_name">调度机器人</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot2.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot2.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot2.isshutdown" v-if="isFlashing">
                                </div>
                                <div class="robot_state robot3">
                                    <p class="robot_name">下料机械手</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot3.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot3.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot3.isshutdown" v-if="isFlashing">
                                </div>
                            </div>
                        </div>
                        <div class="linearea">
                            <div class="linestate">
                                <p class="topic">3线</p>
                                <div class="robots">
                                    <div class="shortline"></div>
                                    <img src="../assets/load.png" class="robot_icon">
                                    <div class="longline"></div>
                                    <img src="../assets/robot.png" class="robot_icon">
                                    <div class="longline"></div>
                                    <img src="../assets/unload.png" class="robot_icon">
                                    <div class="shortline"></div>
                                </div>
                            </div>
                            <div class="linestatus">
                                <div class="robot_state robot1">
                                    <p class="robot_name">上料机械手</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot1.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot1.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot1.isshutdown" v-if="isFlashing">
                                </div>
                                <div class="robot_state robot2">
                                    <p class="robot_name">调度机器人</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot2.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot2.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot2.isshutdown" v-if="isFlashing">
                                </div>
                                <div class="robot_state robot3">
                                    <p class="robot_name">下料机械手</p>
                                    <img src="../assets/green.png" class="robotstatus1" v-show="line1Robot3.isrun">
                                    <img src="../assets/yellow.png" class="robotstatus2" v-show="line1Robot3.isstandby" v-if="isFlashing">
                                    <img src="../assets/red.png" class="robotstatus3" v-show="line1Robot3.isshutdown" v-if="isFlashing">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
            <div class="Realtime_Alarm">
                <div class="line_Alarm">
                    <div class="subtitle">工艺1线报警信息</div>
                    <div class="alarmarea">
                        <div class="alarmcontent">
                            <div class="alarmtopic">
                                <img src="../assets/alarm_light.png" class="alarmlight">
                                <p class="alarmtitle">1线异常报警</p>
                            </div>
                            <el-table
                                class="alarmlist"
                                :data="tableData1"
                                :header-cell-style="{ padding:0,background:'#0a1136',color:'white',textAlign:'center'}"
                                :cell-style="{padding:0,background:'#0d1543',color:'red',textAlign: 'center',fontWeight:'bold'}"
                                style="width: 100%">
                                <el-table-column
                                    prop="startAlarmTime"
                                    label="报警时间"
                                    width="160">
                                </el-table-column>
                                <el-table-column
                                    prop="alarmDetails"
                                    label="报警信息"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="line_Alarm">
                    <div class="subtitle">工艺2线报警信息</div>
                    <div class="alarmarea">
                        <div class="alarmcontent">
                            <div class="alarmtopic">
                                <img src="../assets/alarm_light.png" class="alarmlight">
                                <p class="alarmtitle">2线异常报警</p>
                            </div>
                            <el-table
                                class="alarmlist"
                                :data="tableData2"
                                :header-cell-style="{ padding:0,background:'#0a1136',color:'white',textAlign:'center'}"
                                :cell-style="{padding:0,background:'#0d1543',color:'red',textAlign: 'center',fontWeight:'bold'}"
                                style="width: 100%">
                                <el-table-column
                                    prop="startAlarmTime"
                                    label="报警时间"
                                    width="160">
                                </el-table-column>
                                <el-table-column
                                    prop="alarmDetails"
                                    label="报警信息"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="line_Alarm">
                    <div class="subtitle">工艺3线报警信息</div>
                    <div class="alarmarea">
                        <div class="alarmcontent">
                            <div class="alarmtopic">
                                <img src="../assets/alarm_light.png" class="alarmlight">
                                <p class="alarmtitle">3线异常报警</p>
                            </div>
                            <el-table
                                class="alarmlist"
                                :data="tableData3"
                                :header-cell-style="{ padding:0,background:'#0a1136',color:'white',textAlign:'center'}"
                                :cell-style="{padding:0,background:'#0d1543',color:'red',textAlign: 'center',fontWeight:'bold'}"
                                style="width: 100%">
                                <el-table-column
                                    prop="startAlarmTime"
                                    label="报警时间"
                                    width="160">
                                </el-table-column>
                                <el-table-column
                                    prop="alarmDetails"
                                    label="报警信息"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Realtime_Alarm">
                <div class="line_Alarm">
                    <div class="subtitle">物流1线报警信息</div>
                    <div class="alarmarea">
                        <div class="alarmcontent">
                            <div class="alarmtopic">
                                <img src="../assets/alarm_light.png" class="alarmlight">
                                <p class="alarmtitle">1线异常报警</p>
                            </div>
                            <el-table
                                class="alarmlist"
                                :data="tableData4"
                                :header-cell-style="{ padding:0,background:'#0a1136',color:'white',textAlign:'center'}"
                                :cell-style="{padding:0,background:'#0d1543',color:'red',textAlign: 'center',fontWeight:'bold'}"
                                style="width: 100%">
                                <el-table-column
                                    prop="startAlarmTime"
                                    label="报警时间"
                                    width="160">
                                </el-table-column>
                                <el-table-column
                                    prop="alarmDetails"
                                    label="报警信息"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="line_Alarm">
                    <div class="subtitle">物流2线报警信息</div>
                    <div class="alarmarea">
                        <div class="alarmcontent">
                            <div class="alarmtopic">
                                <img src="../assets/alarm_light.png" class="alarmlight">
                                <p class="alarmtitle">2线异常报警</p>
                            </div>
                            <el-table
                                class="alarmlist"
                                :data="tableData5"
                                :header-cell-style="{ padding:0,background:'#0a1136',color:'white',textAlign:'center'}"
                                :cell-style="{padding:0,background:'#0d1543',color:'red',textAlign: 'center',fontWeight:'bold'}"
                                style="width: 100%">
                                <el-table-column
                                    prop="startAlarmTime"
                                    label="报警时间"
                                    width="160">
                                </el-table-column>
                                <el-table-column
                                    prop="alarmDetails"
                                    label="报警信息"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="line_Alarm">
                    <div class="subtitle">物流3线报警信息</div>
                    <div class="alarmarea">
                        <div class="alarmcontent">
                            <div class="alarmtopic">
                                <img src="../assets/alarm_light.png" class="alarmlight">
                                <p class="alarmtitle">3线异常报警</p>
                            </div>
                            <el-table
                                class="alarmlist"
                                :data="tableData6"
                                :header-cell-style="{ padding:0,background:'#0a1136',color:'white',textAlign:'center'}"
                                :cell-style="{padding:0,background:'#0d1543',color:'red',textAlign: 'center',fontWeight:'bold'}"
                                style="width: 100%">
                                <el-table-column
                                    prop="startAlarmTime"
                                    label="报警时间"
                                    width="160">
                                </el-table-column>
                                <el-table-column
                                    prop="alarmDetails"
                                    label="报警信息"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="production_data">
                <div class="productiondata">
                    <p class="subtitle">1线生产数据</p>
                    <div class="productionarea">
                        <div id="chart1"></div>
                    </div>
                </div>
                <div class="productiondata">
                    <p class="subtitle">2线生产数据</p>
                    <div class="productionarea">
                        <div id="chart2"></div>
                    </div>
                </div>
                <div class="productiondata">
                    <p class="subtitle">3线生产数据</p>
                    <div class="productionarea">
                        <div id="chart3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.bake{
    width: 100%;
    height: 93.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: url(../assets/backimg.jpeg) no-repeat center center;
    background-size: cover;
    background-position: center;
    z-index: -1;
    color: white;
}
.toparea{
    width: 100%;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.statuslist{
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
}
.status_description{
    width: 5.625rem;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.status1{
    width: 1.875rem;
    height: 1.875rem;
}
.status2{
    width: 2.1875rem;
    height: 2.1875rem;
}
.status3{
    width: 2.5rem;
    height: 2.5rem;
}
.status1, .status2, .status3{
    margin-top: .1875rem;
}
.description{
    font-size: 1.5rem;
    vertical-align: center;
}
.currenttime{
    font-size: 1.25rem;
    position: absolute;
    right: 1.25rem;
}
.mainarea{
    width: 100%;
    height: 96%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* margin-top: -0.3125rem; */
}
.firstly{
    width: 96%;
    height: 45.625rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.title{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.title1, .title2{
    color: rgba(41, 224, 227, 1);
    font-size: 1.25rem;
    font-weight: bold;
}
.title1{
    margin-left: 26.25rem;
}
.title2{
    margin-left: 40rem;
}
.runningstate{
    width: 75%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.defectinfor{
    width: 22%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.linedefect{
    width: 100%;
    height: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.defectarea{
    width: 20%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    border-left: .125rem dashed rgba(41, 211, 227, 1);
    /* background: rgba(41, 180, 227, 0.31); */
    /* border-radius: .5rem;
    border: .125rem solid rgba(41, 224, 227, 1);
    box-shadow: 0rem 0rem .3125rem rgba(41, 211, 227, 1); */
}
.defectcontent{
    width: 99%;
    height: 98%;
    background: rgba(41, 180, 227, 0.1);
    border-radius: .375rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /* align-items: center; */
    padding-left: 3.75rem;
}
.defecttext{
    margin-right: 13.125rem;
}
.chart{
    display: flex;
    align-items: center;
    margin-top: .625rem;
}
.el-progress{
    width: 13.75rem;
    margin-right: .5rem;
}
.subtitle{
    color: rgba(41, 224, 227, 1);
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: .3125rem;
}
.statearea{
    width: 100%;
    height: 95%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* border-radius: .5rem;
    border: .125rem solid rgba(41, 224, 227, 1);
    box-shadow: 0rem 0rem .3125rem rgba(41, 211, 227, 1); */
}
.statecontent{
    width: 99.8%;
    height: 99.5%;
    background: rgba(41, 180, 227, 0.1);
    border-radius: .375rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.linecontent{
    width: 100%;
    height: 32%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.linearea{
    width:100%;
    height: 31%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: .5rem;
    border: .125rem solid rgba(41, 224, 227, 1);
    box-shadow: 0rem 0rem .5rem rgba(41, 211, 227, 1);
}
.robotarea{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.linestate{
    width: 100%;
    /* height: 30%; */
    display: flex;
    /* justify-content: center; */
    align-items: center;
}
.linestatus{
    width: 100%;
    height: 1.875rem;
    display: flex;
    /* justify-content: center; */
    align-items: center;
}
.topic{
    width:1.25rem;
    text-align: center;
    font-size: 1.25rem;
    color: rgba(41, 224, 227, 1);
    font-weight: bold;
    /* margin-right: 1rem; */
    /* writing-mode: vertical-lr; */
}
.statusarea{
    width: 72%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.ovens{
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
}
.robots{
    display: flex;
    align-items: center;
}
.oven_area{
    width: 5.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.oven_icon{
    width: 5.5rem;
    height: 4.375rem;
}
.oven_state{
    width: 100%;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.oven_name{
    /* position: absolute; */
    margin:0 0 .0625rem -.75rem;
}
.ovenstatus1, .ovenstatus2, .ovenstatus3{
    position: absolute;
    margin-left: 4rem;
}
.coolingstatus1, .coolingstatus2, .coolingstatus3{
    position: absolute;
    margin-left: 5rem;
}
.ovenstatus1, .coolingstatus1, .robotstatus1{
    width: 1.125rem;
    height: 1.125rem;
}
.ovenstatus2, .coolingstatus2, .robotstatus2{
    width: 1.25rem;
    height: 1.25rem;
}
.ovenstatus3, .coolingstatus3, .robotstatus3{
    width: 1.5rem;
    height: 1.5rem;
}
.line{
    width: 6.25rem;
    height: .3125rem;
    background: silver;
    margin-bottom: 1rem;
}
.shortline{
    width: 7.5rem;
    height: .3125rem;
    background: silver;
}
.longline{
    width: 20.3125rem;
    height: .3125rem;
    background: silver;
}
.robot_icon{
    width: 3.125rem;
    height: 3.75rem;
}
.robot_state{
    width: 6.875rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
}
.robot1{
    margin-left: 6.25rem;
}
.robot2{
    margin-left: 16.25rem;
    margin-right: 13.75rem;
}
.robot3{
    margin-left: 3.25rem;
}
.Realtime_Alarm{
    width: 96%;
    height: 13.125rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.line_Alarm{
    width: 32%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.alarmarea{
    width: 100%;
    height: 86%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: rgba(41, 180, 227, 0.31); */
    border-radius: .5rem;
    border: .125rem solid rgba(41, 224, 227, 1);
    box-shadow: 0rem 0rem .3125rem rgba(41, 211, 227, 1);
}
.alarmcontent{
    width: 99%;
    height: 98%;
    background: rgba(41, 180, 227, 0.1);
    border-radius: .375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.alarmtopic{
    width: 100%;
    height: 22%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.alarmlight{
    width: 1.875rem;
    height: 1.875rem;
    margin-right: .625rem;
}
.alarmtitle{
    font-size: 1.25rem;
    font-weight: 800;
    color: red;
}
.alarmlist{
    /* margin-top: .5rem; */
    /* height: 60%; */
    /* font-size: .875rem; */
    overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
}
.el-table, .el-table__expanded-cell {
    background-color: #0d1543 !important;
}
.el-table::before {
    height: 0;
}
.warningbody{
    color: #FF4500;
    font-size: 1.75rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 0; */
    height: 7.5rem;
}
.production_data{
    width: 96%;
    height: 15.625rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}
.productiondata{
    width: 32%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.productionarea{
    width: 100%;
    height: 13.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: rgba(41, 180, 227, 0.31); */
    border-radius: .5rem;
    border: .125rem solid rgba(41, 224, 227, 1);
    box-shadow: 0rem 0rem .3125rem rgba(41, 211, 227, 1);
}
#chart1, #chart2, #chart3{
    width: 99%;
    height: 98%;
    background: #131b4a;
    border-radius: .375rem;
}
</style>
<script>
import * as echarts from 'echarts';
import { EventBus } from '../assets/event-bus'
import { EleResize } from '../assets/esresize'// 图表自适应
// import {socket1,establishCommunication1,socket2,establishCommunication2,socket3,establishCommunication3,socket4,establishCommunication4,socket5,establishCommunication5} from '../assets/socket.js'
export default{
    mounted(){
        // establishCommunication1()
        // establishCommunication2()
        // establishCommunication3()
        // establishCommunication4()
        // establishCommunication5()
        this.getCurrentState()
        this.getCurrentAlarm()
        this.getCurrentNg()
        this.getHourProduction()
        EventBus.$on('saveCurrentState', this.getCurrentState);      //监听实时状态事件总线内容
        window.addEventListener('onMessageCurrentAlarm', this.getCurrentAlarm)      //添加实时报警通知监听
        EventBus.$on('saveCurrentNg', this.getCurrentNg);      //监听实时Ng事件总线内容
        EventBus.$on('saveHourProduction', this.getHourProduction);      //监听小时别生产数据事件总线内容
        this.startFlashing()
        this.initChart();
        this.fetchData();
        // this.line1Oven1.status='1',
        // this.line1Oven2.status='1',
        // this.line1CoolingBox.status='3',
        // this.line1Oven3.status='1',
        // this.line1Oven4.status='2',
        // this.line2Oven1.status='1',
        // this.line2Oven2.status='1',
        // this.line2CoolingBox.status='3',
        // this.line2Oven3.status='1',
        // this.line2Oven4.status='2',
        // this.line3Oven1.status='1',
        // this.line3Oven2.status='1',
        // this.line3CoolingBox.status='3',
        // this.line3Oven3.status='1',
        // this.line3Oven4.status='2',
        // this.line1load.status='2'
        // this.line1dispatch.status='3'
        // this.line1unload.status='1'
        // this.line2load.status='1'
        // this.line2dispatch.status='2'
        // this.line2unload.status='1'
        // this.line3load.status='1'
        // this.line3dispatch.status='1'
        // this.line3unload.status='1'
    },
    data(){
        return{
            myChart1:'',
            myChart2:'',
            myChart3:'',
            dialogwidth:'46.875rem',
            dialogHeight:'12.5rem',
            currentTime: this.getCurrentDateTime(),
            isFlashing:undefined,
            line1currentValue: 0, // 实际值
            line2currentValue: 0, // 实际值
            line3currentValue: 0, // 实际值
            maxValue: 30, // 最大值
            warningValue: 25, // 预警值
            dialog1Visible: false,
            dialog2Visible: false,
            dialog3Visible: false,
            line1Oven1:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line1Oven2:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line1CoolingBox:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line1Oven3:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line1Oven4:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line1load:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line1dispatch:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line1unload:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line2Oven1:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line2Oven2:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line2CoolingBox:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line2Oven3:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line2Oven4:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line2load:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line2dispatch:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line2unload:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line3Oven1:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line3Oven2:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line3CoolingBox:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line3Oven3:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line3Oven4:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line3load:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line3dispatch:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            line3unload:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            tableData1: [],
            tableData2: [],
            tableData3: [],
            tableData4: [],
            tableData5: [],
            tableData6: [],
            line1HourProduction:{
                hourHand:[],
                qualifiedNumber:[],
                noGoodNumber:[],
                finePercent:[]
            },
            line2HourProduction:{
                hourHand:[],
                qualifiedNumber:[],
                noGoodNumber:[],
                finePercent:[]
            },
            line3HourProduction:{
                hourHand:[],
                qualifiedNumber:[],
                noGoodNumber:[],
                finePercent:[]
            }
        }
    },
    watch:{
        'line1Oven1.status': function(newVal, oldVal){
            switch(this.line1Oven1.status){
                case '1':
                    this.line1Oven1.isrun=true
                    this.line1Oven1.isstandby=false
                    this.line1Oven1.isshutdown=false
                    break;
                case '2':
                    this.line1Oven1.isrun=false
                    this.line1Oven1.isstandby=true
                    this.line1Oven1.isshutdown=false
                    break;
                case '3':
                    this.line1Oven1.isrun=false
                    this.line1Oven1.isstandby=false
                    this.line1Oven1.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line1Oven2.status': function(newVal, oldVal){
            switch(this.line1Oven2.status){
                case '1':
                    this.line1Oven2.isrun=true
                    this.line1Oven2.isstandby=false
                    this.line1Oven2.isshutdown=false
                    break;
                case '2':
                    this.line1Oven2.isrun=false
                    this.line1Oven2.isstandby=true
                    this.line1Oven2.isshutdown=false
                    break;
                case '3':
                    this.line1Oven2.isrun=false
                    this.line1Oven2.isstandby=false
                    this.line1Oven2.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line1CoolingBox.status': function(newVal, oldVal){
            switch(this.line1CoolingBox.status){
                case '1':
                    this.line1CoolingBox.isrun=true
                    this.line1CoolingBox.isstandby=false
                    this.line1CoolingBox.isshutdown=false
                    break;
                case '2':
                    this.line1CoolingBox.isrun=false
                    this.line1CoolingBox.isstandby=true
                    this.line1CoolingBox.isshutdown=false
                    break;
                case '3':
                    this.line1CoolingBox.isrun=false
                    this.line1CoolingBox.isstandby=false
                    this.line1CoolingBox.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line1Oven3.status': function(newVal, oldVal){
            switch(this.line1Oven3.status){
                case '1':
                    this.line1Oven3.isrun=true
                    this.line1Oven3.isstandby=false
                    this.line1Oven3.isshutdown=false
                    break;
                case '2':
                    this.line1Oven3.isrun=false
                    this.line1Oven3.isstandby=true
                    this.line1Oven3.isshutdown=false
                    break;
                case '3':
                    this.line1Oven3.isrun=false
                    this.line1Oven3.isstandby=false
                    this.line1Oven3.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line1Oven4.status': function(newVal, oldVal){
            switch(this.line1Oven4.status){
                case '1':
                    this.line1Oven4.isrun=true
                    this.line1Oven4.isstandby=false
                    this.line1Oven4.isshutdown=false
                    break;
                case '2':
                    this.line1Oven4.isrun=false
                    this.line1Oven4.isstandby=true
                    this.line1Oven4.isshutdown=false
                    break;
                case '3':
                    this.line1Oven4.isrun=false
                    this.line1Oven4.isstandby=false
                    this.line1Oven4.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line2Oven1.status': function(newVal, oldVal){
            switch(this.line2Oven1.status){
                case '1':
                    this.line2Oven1.isrun=true
                    this.line2Oven1.isstandby=false
                    this.line2Oven1.isshutdown=false
                    break;
                case '2':
                    this.line2Oven1.isrun=false
                    this.line2Oven1.isstandby=true
                    this.line2Oven1.isshutdown=false
                    break;
                case '3':
                    this.line2Oven1.isrun=false
                    this.line2Oven1.isstandby=false
                    this.line2Oven1.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line2Oven2.status': function(newVal, oldVal){
            switch(this.line2Oven2.status){
                case '1':
                    this.line2Oven2.isrun=true
                    this.line2Oven2.isstandby=false
                    this.line2Oven2.isshutdown=false
                    break;
                case '2':
                    this.line2Oven2.isrun=false
                    this.line2Oven2.isstandby=true
                    this.line2Oven2.isshutdown=false
                    break;
                case '3':
                    this.line2Oven2.isrun=false
                    this.line2Oven2.isstandby=false
                    this.line2Oven2.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line2CoolingBox.status': function(newVal, oldVal){
            switch(this.line2CoolingBox.status){
                case '1':
                    this.line2CoolingBox.isrun=true
                    this.line2CoolingBox.isstandby=false
                    this.line2CoolingBox.isshutdown=false
                    break;
                case '2':
                    this.line2CoolingBox.isrun=false
                    this.line2CoolingBox.isstandby=true
                    this.line2CoolingBox.isshutdown=false
                    break;
                case '3':
                    this.line2CoolingBox.isrun=false
                    this.line2CoolingBox.isstandby=false
                    this.line2CoolingBox.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line2Oven3.status': function(newVal, oldVal){
            switch(this.line2Oven3.status){
                case '1':
                    this.line2Oven3.isrun=true
                    this.line2Oven3.isstandby=false
                    this.line2Oven3.isshutdown=false
                    break;
                case '2':
                    this.line2Oven3.isrun=false
                    this.line2Oven3.isstandby=true
                    this.line2Oven3.isshutdown=false
                    break;
                case '3':
                    this.line2Oven3.isrun=false
                    this.line2Oven3.isstandby=false
                    this.line2Oven3.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line2Oven4.status': function(newVal, oldVal){
            switch(this.line2Oven4.status){
                case '1':
                    this.line2Oven4.isrun=true
                    this.line2Oven4.isstandby=false
                    this.line2Oven4.isshutdown=false
                    break;
                case '2':
                    this.line2Oven4.isrun=false
                    this.line2Oven4.isstandby=true
                    this.line2Oven4.isshutdown=false
                    break;
                case '3':
                    this.line2Oven4.isrun=false
                    this.line2Oven4.isstandby=false
                    this.line2Oven4.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line3Oven1.status': function(newVal, oldVal){
            switch(this.line3Oven1.status){
                case '1':
                    this.line3Oven1.isrun=true
                    this.line3Oven1.isstandby=false
                    this.line3Oven1.isshutdown=false
                    break;
                case '2':
                    this.line3Oven1.isrun=false
                    this.line3Oven1.isstandby=true
                    this.line3Oven1.isshutdown=false
                    break;
                case '3':
                    this.line3Oven1.isrun=false
                    this.line3Oven1.isstandby=false
                    this.line3Oven1.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line3Oven2.status': function(newVal, oldVal){
            switch(this.line3Oven2.status){
                case '1':
                    this.line3Oven2.isrun=true
                    this.line3Oven2.isstandby=false
                    this.line3Oven2.isshutdown=false
                    break;
                case '2':
                    this.line3Oven2.isrun=false
                    this.line3Oven2.isstandby=true
                    this.line3Oven2.isshutdown=false
                    break;
                case '3':
                    this.line3Oven2.isrun=false
                    this.line3Oven2.isstandby=false
                    this.line3Oven2.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line3CoolingBox.status': function(newVal, oldVal){
            switch(this.line3CoolingBox.status){
                case '1':
                    this.line3CoolingBox.isrun=true
                    this.line3CoolingBox.isstandby=false
                    this.line3CoolingBox.isshutdown=false
                    break;
                case '2':
                    this.line3CoolingBox.isrun=false
                    this.line3CoolingBox.isstandby=true
                    this.line3CoolingBox.isshutdown=false
                    break;
                case '3':
                    this.line3CoolingBox.isrun=false
                    this.line3CoolingBox.isstandby=false
                    this.line3CoolingBox.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line3Oven3.status': function(newVal, oldVal){
            switch(this.line3Oven3.status){
                case '1':
                    this.line3Oven3.isrun=true
                    this.line3Oven3.isstandby=false
                    this.line3Oven3.isshutdown=false
                    break;
                case '2':
                    this.line3Oven3.isrun=false
                    this.line3Oven3.isstandby=true
                    this.line3Oven3.isshutdown=false
                    break;
                case '3':
                    this.line3Oven3.isrun=false
                    this.line3Oven3.isstandby=false
                    this.line3Oven3.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line3Oven4.status': function(newVal, oldVal){
            switch(this.line3Oven4.status){
                case '1':
                    this.line3Oven4.isrun=true
                    this.line3Oven4.isstandby=false
                    this.line3Oven4.isshutdown=false
                    break;
                case '2':
                    this.line3Oven4.isrun=false
                    this.line3Oven4.isstandby=true
                    this.line3Oven4.isshutdown=false
                    break;
                case '3':
                    this.line3Oven4.isrun=false
                    this.line3Oven4.isstandby=false
                    this.line3Oven4.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line1load.status': function(newVal, oldVal){
            switch(this.line1load.status){
                case '1':
                    this.line1load.isrun=true
                    this.line1load.isstandby=false
                    this.line1load.isshutdown=false
                    break;
                case '2':
                    this.line1load.isrun=false
                    this.line1load.isstandby=true
                    this.line1load.isshutdown=false
                    break;
                case '3':
                    this.line1load.isrun=false
                    this.line1load.isstandby=false
                    this.line1load.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line1dispatch.status': function(newVal, oldVal){
            switch(this.line1dispatch.status){
                case '1':
                    this.line1dispatch.isrun=true
                    this.line1dispatch.isstandby=false
                    this.line1dispatch.isshutdown=false
                    break;
                case '2':
                    this.line1dispatch.isrun=false
                    this.line1dispatch.isstandby=true
                    this.line1dispatch.isshutdown=false
                    break;
                case '3':
                    this.line1dispatch.isrun=false
                    this.line1dispatch.isstandby=false
                    this.line1dispatch.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line1unload.status': function(newVal, oldVal){
            switch(this.line1unload.status){
                case '1':
                    this.line1unload.isrun=true
                    this.line1unload.isstandby=false
                    this.line1unload.isshutdown=false
                    break;
                case '2':
                    this.line1unload.isrun=false
                    this.line1unload.isstandby=true
                    this.line1unload.isshutdown=false
                    break;
                case '3':
                    this.line1unload.isrun=false
                    this.line1unload.isstandby=false
                    this.line1unload.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line2load.status': function(newVal, oldVal){
            switch(this.line2load.status){
                case '1':
                    this.line2load.isrun=true
                    this.line2load.isstandby=false
                    this.line2load.isshutdown=false
                    break;
                case '2':
                    this.line2load.isrun=false
                    this.line2load.isstandby=true
                    this.line2load.isshutdown=false
                    break;
                case '3':
                    this.line2load.isrun=false
                    this.line2load.isstandby=false
                    this.line2load.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line2dispatch.status': function(newVal, oldVal){
            switch(this.line2dispatch.status){
                case '1':
                    this.line2dispatch.isrun=true
                    this.line2dispatch.isstandby=false
                    this.line2dispatch.isshutdown=false
                    break;
                case '2':
                    this.line2dispatch.isrun=false
                    this.line2dispatch.isstandby=true
                    this.line2dispatch.isshutdown=false
                    break;
                case '3':
                    this.line2dispatch.isrun=false
                    this.line2dispatch.isstandby=false
                    this.line2dispatch.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line2unload.status': function(newVal, oldVal){
            switch(this.line2unload.status){
                case '1':
                    this.line2unload.isrun=true
                    this.line2unload.isstandby=false
                    this.line2unload.isshutdown=false
                    break;
                case '2':
                    this.line2unload.isrun=false
                    this.line2unload.isstandby=true
                    this.line2unload.isshutdown=false
                    break;
                case '3':
                    this.line2unload.isrun=false
                    this.line2unload.isstandby=false
                    this.line2unload.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line3load.status': function(newVal, oldVal){
            switch(this.line3load.status){
                case '1':
                    this.line3load.isrun=true
                    this.line3load.isstandby=false
                    this.line3load.isshutdown=false
                    break;
                case '2':
                    this.line3load.isrun=false
                    this.line3load.isstandby=true
                    this.line3load.isshutdown=false
                    break;
                case '3':
                    this.line3load.isrun=false
                    this.line3load.isstandby=false
                    this.line3load.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line3dispatch.status': function(newVal, oldVal){
            switch(this.line3dispatch.status){
                case '1':
                    this.line3dispatch.isrun=true
                    this.line3dispatch.isstandby=false
                    this.line3dispatch.isshutdown=false
                    break;
                case '2':
                    this.line3dispatch.isrun=false
                    this.line3dispatch.isstandby=true
                    this.line3dispatch.isshutdown=false
                    break;
                case '3':
                    this.line3dispatch.isrun=false
                    this.line3dispatch.isstandby=false
                    this.line3dispatch.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'line3unload.status': function(newVal, oldVal){
            switch(this.line3unload.status){
                case '1':
                    this.line3unload.isrun=true
                    this.line3unload.isstandby=false
                    this.line3unload.isshutdown=false
                    break;
                case '2':
                    this.line3unload.isrun=false
                    this.line3unload.isstandby=true
                    this.line3unload.isshutdown=false
                    break;
                case '3':
                    this.line3unload.isrun=false
                    this.line3unload.isstandby=false
                    this.line3unload.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        line1HourProductionChart: function(newVal, oldVal){
            this.updateChart1()
        },
        line2HourProductionChart: function(newVal, oldVal){
            this.updateChart2()
        },
        line3HourProductionChart: function(newVal, oldVal){
            this.updateChart3()
        }
    },
    computed:{
        line1HourProductionChart(){
            return{
                hourHand:this.line1HourProduction.hourHand,
                qualifiedNumber:this.line1HourProduction.qualifiedNumber,
                noGoodNumber:this.line1HourProduction.noGoodNumber,
                finePercent:this.line1HourProduction.finePercent
            }
        },
        line2HourProductionChart(){
            return{
                hourHand:this.line2HourProduction.hourHand,
                qualifiedNumber:this.line2HourProduction.qualifiedNumber,
                noGoodNumber:this.line2HourProduction.noGoodNumber,
                finePercent:this.line2HourProduction.finePercent
            }
        },
        line3HourProductionChart(){
            return{
                hourHand:this.line3HourProduction.hourHand,
                qualifiedNumber:this.line3HourProduction.qualifiedNumber,
                noGoodNumber:this.line3HourProduction.noGoodNumber,
                finePercent:this.line3HourProduction.finePercent
            }
        },
        progressColor1() {
            return this.showWarning1 ? '#FF4500' : '#20a0ff'; // 预警时变色
        },
        showWarning1() {
            // return this.currentValue >= this.warningValue;
            if(this.line1currentValue >= this.warningValue){
                this.dialog1Visible=true
                return true
            }
            else{
                this.dialog1Visible=false
                return false
            }
        },
        progressColor2() {
            return this.showWarning2 ? '#FF4500' : '#20a0ff'; // 预警时变色
        },
        showWarning2() {
            // return this.currentValue >= this.warningValue;
            if(this.line2currentValue >= this.warningValue){
                this.dialog2Visible=true
                return true
            }
            else{
                this.dialog2Visible=false
                return false
            }
        },
        progressColor3() {
            return this.showWarning3 ? '#FF4500' : '#20a0ff'; // 预警时变色
        },
        showWarning3() {
            // return this.currentValue >= this.warningValue;
            if(this.line3currentValue >= this.warningValue){
                this.dialog3Visible=true
                return true
            }
            else{
                this.dialog3Visible=false
                return false
            }
        },
    },
    methods:{
        getCurrentState(){
            if(JSON.parse(localStorage.getItem('setBakeLine1Oven1'))!==null){
                this.line1Oven1.status = JSON.parse(localStorage.getItem('setBakeLine1Oven1')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine1Oven2'))!==null){
                this.line1Oven2.status = JSON.parse(localStorage.getItem('setBakeLine1Oven2')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine1CoolingBox'))!==null){
                this.line1CoolingBox.status = JSON.parse(localStorage.getItem('setBakeLine1CoolingBox')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine1Oven3'))!==null){
                this.line1Oven3.status = JSON.parse(localStorage.getItem('setBakeLine1Oven3')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine1Oven4'))!==null){
                this.line1Oven4.status = JSON.parse(localStorage.getItem('setBakeLine1Oven4')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2Oven1'))!==null){
                this.line2Oven1.status = JSON.parse(localStorage.getItem('setBakeLine2Oven1')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2Oven2'))!==null){
                this.line2Oven2.status = JSON.parse(localStorage.getItem('setBakeLine2Oven2')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2CoolingBox'))!==null){
                this.line2CoolingBox.status = JSON.parse(localStorage.getItem('setBakeLine2CoolingBox')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2Oven3'))!==null){
                this.line2Oven3.status = JSON.parse(localStorage.getItem('setBakeLine2Oven3')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2Oven4'))!==null){
                this.line2Oven4.status = JSON.parse(localStorage.getItem('setBakeLine2Oven4')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3Oven1'))!==null){
                this.line3Oven1.status = JSON.parse(localStorage.getItem('setBakeLine3Oven1')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3Oven2'))!==null){
                this.line3Oven2.status = JSON.parse(localStorage.getItem('setBakeLine3Oven2')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3CoolingBox'))!==null){
                this.line3CoolingBox.status = JSON.parse(localStorage.getItem('setBakeLine3CoolingBox')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3Oven3'))!==null){
                this.line3Oven3.status = JSON.parse(localStorage.getItem('setBakeLine3Oven3')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3Oven4'))!==null){
                this.line3Oven4.status = JSON.parse(localStorage.getItem('setBakeLine3Oven4')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine1Load'))!==null){
                this.line1load.status = JSON.parse(localStorage.getItem('setBakeLine1Load')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine1Unload'))!==null){
                this.line1unload.status = JSON.parse(localStorage.getItem('setBakeLine1Unload')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine1Dispatch'))!==null){
                this.line1dispatch.status = JSON.parse(localStorage.getItem('setBakeLine1Dispatch')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2Load'))!==null){
                this.line2load.status = JSON.parse(localStorage.getItem('setBakeLine2Load')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2Unload'))!==null){
                this.line2unload.status = JSON.parse(localStorage.getItem('setBakeLine2Unload')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine2Dispatch'))!==null){
                this.line2dispatch.status = JSON.parse(localStorage.getItem('setBakeLine2Dispatch')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3Load'))!==null){
                this.line3load.status = JSON.parse(localStorage.getItem('setBakeLine3Load')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3Unload'))!==null){
                this.line3unload.status = JSON.parse(localStorage.getItem('setBakeLine3Unload')).deviceStatus
            }
            if(JSON.parse(localStorage.getItem('setBakeLine3Dispatch'))!==null){
                this.line3dispatch.status = JSON.parse(localStorage.getItem('setBakeLine3Dispatch')).deviceStatus
            }
            // const receivedata = this.$store.getters.socketData1
        },
        getCurrentAlarm(res){
            if(JSON.parse(localStorage.getItem('setCurrentAlarm'))!==null){
                const currentAlarm = JSON.parse(localStorage.getItem('setCurrentAlarm'))
                this.tableData1=currentAlarm.filter(item => item.productionProcess=='烘烤工艺' && item.lineNumber=='1线')
                this.tableData2=currentAlarm.filter(item => item.productionProcess=='烘烤工艺' && item.lineNumber=='2线')
                this.tableData3=currentAlarm.filter(item => item.productionProcess=='烘烤工艺' && item.lineNumber=='3线')
                this.tableData4=currentAlarm.filter(item => item.productionProcess=='烘烤物流' && item.lineNumber=='1线')
                this.tableData5=currentAlarm.filter(item => item.productionProcess=='烘烤物流' && item.lineNumber=='2线')
                this.tableData6=currentAlarm.filter(item => item.productionProcess=='烘烤物流' && item.lineNumber=='3线')
            }
        },
        getCurrentNg(){
            this.line1currentValue=localStorage.getItem('setBakeLine1CurrentValue')
            this.line2currentValue=localStorage.getItem('setBakeLine2CurrentValue')
            this.line3currentValue=localStorage.getItem('setBakeLine3CurrentValue')
        },
        getHourProduction(){
            const line1HourProduction=JSON.parse(localStorage.getItem('setbakeLine1HourProduction'))
            const line2HourProduction=JSON.parse(localStorage.getItem('setbakeLine2HourProduction'))
            const line3HourProduction=JSON.parse(localStorage.getItem('setbakeLine3HourProduction'))
            if(line1HourProduction!==null){
                this.line1HourProduction.hourHand=line1HourProduction.hourHand
                this.line1HourProduction.qualifiedNumber=line1HourProduction.qualifiedNumber
                this.line1HourProduction.noGoodNumber=line1HourProduction.noGoodNumber
                this.line1HourProduction.finePercent=line1HourProduction.finePercent
            }
            if(line2HourProduction!==null){
                this.line2HourProduction.hourHand=line2HourProduction.hourHand
                this.line2HourProduction.qualifiedNumber=line2HourProduction.qualifiedNumber
                this.line2HourProduction.noGoodNumber=line2HourProduction.noGoodNumber
                this.line2HourProduction.finePercent=line2HourProduction.finePercent
            }
            if(line3HourProduction!==null){
                this.line3HourProduction.hourHand=line3HourProduction.hourHand
                this.line3HourProduction.qualifiedNumber=line3HourProduction.qualifiedNumber
                this.line3HourProduction.noGoodNumber=line3HourProduction.noGoodNumber
                this.line3HourProduction.finePercent=line3HourProduction.finePercent
            }
        },
        startFlashing() {
            this.isFlashing = true;
            this.intervalId = setInterval(() => {
                this.isFlashing = !this.isFlashing;
                this.currentTime = this.getCurrentDateTime();
            }, 1000); // 每秒切换一次
        },
        getCurrentDateTime(){
            const now = new Date();
            return `${now.getFullYear()}-${this.padNumber(now.getMonth() + 1)}-${this.padNumber(now.getDate())}
            ${this.padNumber(now.getHours())}:${this.padNumber(now.getMinutes())}:${this.padNumber(now.getSeconds())}`;
        },
        padNumber(num) {
            return num < 10 ? '0' + num : num;
        },
        progressValue(currentValue,maxValue) {
            let percentdata = (currentValue / maxValue * 100).toFixed(1)
            if(Math.floor(percentdata * 10) % 10 == 0){
                percentdata=Math.round(percentdata)
            }
            else{
                percentdata=Number(percentdata)
            }
            return percentdata
        },
        initChart() {
            var chartDom1 = document.getElementById('chart1');
            var chartDom2 = document.getElementById('chart2');
            var chartDom3 = document.getElementById('chart3');
            this.myChart1 = echarts.init(chartDom1);
            this.myChart2 = echarts.init(chartDom2);
            this.myChart3 = echarts.init(chartDom3);
        },
        fetchData() {
            this.updateChart1();
            this.updateChart2();
            this.updateChart3();
        },
        updateChart1(){
            var element = document.getElementById('chart1');
            const listener = function() {
                echarts.init(element).resize()
            }
            EleResize.on(element, listener)
            const option = {
                grid: {
                    top:'28%',
                    bottom:'12%'
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(50, 50, 50, 0.7)', // 设置背景色为半透明黑色
                    borderColor: '#ccc', // 设置边框颜色
                    borderWidth: 1, // 设置边框宽度
                    // extraCssText: 'width: 10rem; height: 3.75rem;', // 设置宽度和高度
                    padding: [5, 10], // 设置内边距，数组中的两个值分别表示垂直和水平方向的内边距
                    textStyle: {
                        fontSize: 12, // 设置字体大小为.875rem
                        color: '#fff', // 设置字体颜色为白色
                        fontWeight:'bold'
                    },
                    position: function (point, params, dom, rect, size) {
                        // 自定义位置函数，可以根据需要返回位置信息
                        // point：鼠标位置
                        // params：数据项参数
                        // dom：tooltip的dom元素
                        // rect：图表的包含框
                        // size：视图大小
                        var viewWidth = size.viewSize[0];
                        var viewHeight = size.viewSize[1];
                        var boxWidth = dom.offsetWidth;
                        var boxHeight = dom.offsetHeight;
                        var posX = point[0];
                        var posY = point[1];
                        // 防止tooltip超出视图边界
                        if (posX + boxWidth > viewWidth) {
                            posX -= boxWidth + 10;
                        }
                        if (posY + boxHeight > viewHeight) {
                            posY -= boxHeight + 10;
                        }
                        // 可以根据需要调整位置逻辑
                        return [posX, posY];
                    }
                },
                toolbox: {
                    feature: {
                    dataView: { show: true, readOnly: false, backgroundColor: '#0d1543', 
                    textColor: 'white', textareaColor: '#0d1543', textareaBorderColor: 'silver' },
                    saveAsImage: { show: true, backgroundColor: 'rgba(41, 180, 227, 0.1)', name: '烘烤1线生产数据' },
                    myFull: {
                        show: true,
                        title: '全屏',
                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                        onclick: function () {
                            // 全屏查看
                            if (element.requestFullScreen) {
                                element.requestFullScreen();
                            } else if (element.msRequestFullscreen) {
                                element.msRequestFullScreen();
                            } else if (element.webkitRequestFullScreen) {
                                element.webkitRequestFullScreen();
                            } else if (element.mozRequestFullScreen) {
                                element.mozRequestFullScreen();
                            }
                            // 退出全屏
                            if (element.requestFullScreen) {
                                document.exitFullscreen()
                            } else if (element.msRequestFullScreen) {
                                document.msExitFullscreen()
                            } else if (element.webkitRequestFullScreen) {
                                document.webkitCancelFullScreen()
                            } else if (element.mozRequestFullScreen) {
                                document.mozCancelFullScreen()
                            }
                        }
                    }
                    },
                    iconStyle:{
                        borderColor: 'white',
                        // color: 'red'
                    },
                    emphasis:{
                        iconStyle:{
                            borderColor: '#00FFFF'
                        }
                    }
                },
                legend: {
                    // data: ['目标产能', '实际产能', '良率', 'OEE'],
                    textStyle:{
                        fontWeight:'bold',
                        color:'white',
                        // fontFamily: 'Arial',
                    },
                    top:'2%',
                    left:'5%'
                },
                xAxis: [
                    {
                    type: 'category',
                    data: this.line1HourProduction.hourHand,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        color:'white'
                    },
                    axisLine: {
                        lineStyle: {
                            color:'white'
                        }
                    }
                    }
                ],
                yAxis: [
                    {
                    type: 'value',
                    name: '产能',
                    nameTextStyle: {
                        color: 'white',
                        padding: -5
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    // min: 0,
                    // max: 250,
                    // interval: 50,
                    axisLabel: {
                        formatter: '{value} pcs',
                        margin:3,
                        color:'white',
                        fontSize:9
                    }
                    },
                    {
                    type: 'value',
                    name: '良率',
                    nameTextStyle: {
                        color: 'white',
                        padding: -5
                    },
                    splitLine:{
                        show:false
                    },
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value} %',
                        margin:3,
                        color:'white',
                        fontSize:9
                    }
                    }
                ],
                series: [
                    {
                    name: '合格品数量',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        },
                    },
                    data: this.line1HourProduction.qualifiedNumber,
                    itemStyle: {
                        color: '#00FF7F' 
                    }
                    },
                    {
                    name: 'NG数量',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        },
                    },
                    data: this.line1HourProduction.noGoodNumber,
                    itemStyle: {
                        color: '#FFD700' 
                    }
                    },
                    {
                    name: '良率',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' %';
                        }
                    },
                    data: this.line1HourProduction.finePercent,
                    // lineStyle: {
                    //     color: '#FFD700' 
                    // },
                    itemStyle: {
                        color: '#1E90FF'
                    },
                    label: {
                        show: true,
                        position:'top',
                        fontSize: 8,
                        // fontWeight: 'bold',
                        color:'#FFFFFF',
                        formatter: '{c}%' // 显示百分比数值
                    }
                    },
                ]
            };
            this.myChart1.setOption(option);
        },
        updateChart2(){
            var element = document.getElementById('chart2');
            const listener = function() {
                echarts.init(element).resize()
            }
            EleResize.on(element, listener)
            const option = {
                grid: {
                    top:'28%',
                    bottom:'12%'
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(50, 50, 50, 0.7)', // 设置背景色为半透明黑色
                    borderColor: '#ccc', // 设置边框颜色
                    borderWidth: 1, // 设置边框宽度
                    // extraCssText: 'width: 10rem; height: 3.75rem;', // 设置宽度和高度
                    padding: [5, 10], // 设置内边距，数组中的两个值分别表示垂直和水平方向的内边距
                    textStyle: {
                        fontSize: 12, // 设置字体大小为.875rem
                        color: '#fff', // 设置字体颜色为白色
                        fontWeight:'bold'
                    },
                    position: function (point, params, dom, rect, size) {
                        // 自定义位置函数，可以根据需要返回位置信息
                        // point：鼠标位置
                        // params：数据项参数
                        // dom：tooltip的dom元素
                        // rect：图表的包含框
                        // size：视图大小
                        var viewWidth = size.viewSize[0];
                        var viewHeight = size.viewSize[1];
                        var boxWidth = dom.offsetWidth;
                        var boxHeight = dom.offsetHeight;
                        var posX = point[0];
                        var posY = point[1];
                        // 防止tooltip超出视图边界
                        if (posX + boxWidth > viewWidth) {
                            posX -= boxWidth + 10;
                        }
                        if (posY + boxHeight > viewHeight) {
                            posY -= boxHeight + 10;
                        }
                        // 可以根据需要调整位置逻辑
                        return [posX, posY];
                    }
                },
                toolbox: {
                    feature: {
                    dataView: { show: true, readOnly: false, backgroundColor: '#0d1543', 
                    textColor: 'white', textareaColor: '#0d1543', textareaBorderColor: 'silver' },
                    saveAsImage: { show: true, backgroundColor: 'rgba(41, 180, 227, 0.1)', name: '烘烤2线生产数据' },
                    myFull: {
                        show: true,
                        title: '全屏',
                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                        onclick: function () {
                            // 全屏查看
                            if (element.requestFullScreen) {
                                element.requestFullScreen();
                            } else if (element.msRequestFullscreen) {
                                element.msRequestFullScreen();
                            } else if (element.webkitRequestFullScreen) {
                                element.webkitRequestFullScreen();
                            } else if (element.mozRequestFullScreen) {
                                element.mozRequestFullScreen();
                            }
                            // 退出全屏
                            if (element.requestFullScreen) {
                                document.exitFullscreen()
                            } else if (element.msRequestFullScreen) {
                                document.msExitFullscreen()
                            } else if (element.webkitRequestFullScreen) {
                                document.webkitCancelFullScreen()
                            } else if (element.mozRequestFullScreen) {
                                document.mozCancelFullScreen()
                            }
                        }
                    }
                    },
                    iconStyle:{
                        borderColor: 'white',
                        // color: 'red'
                    },
                    emphasis:{
                        iconStyle:{
                            borderColor: '#00FFFF'
                        }
                    }
                },
                legend: {
                    // data: ['目标产能', '实际产能', '良率', 'OEE'],
                    textStyle:{
                        fontWeight:'bold',
                        color:'white',
                        // fontFamily: 'Arial',
                    },
                    top:'2%',
                    left:'5%'
                },
                xAxis: [
                    {
                    type: 'category',
                    data: this.line2HourProduction.hourHand,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        color:'white'
                    },
                    axisLine: {
                        lineStyle: {
                            color:'white'
                        }
                    }
                    }
                ],
                yAxis: [
                    {
                    type: 'value',
                    name: '产能',
                    nameTextStyle: {
                        color: 'white',
                        padding: -5
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    // min: 0,
                    // max: 250,
                    // interval: 50,
                    axisLabel: {
                        formatter: '{value} pcs',
                        margin:3,
                        color:'white',
                        fontSize:9
                    }
                    },
                    {
                    type: 'value',
                    name: '良率',
                    nameTextStyle: {
                        color: 'white',
                        padding: -5
                    },
                    splitLine:{
                        show:false
                    },
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value} %',
                        margin:3,
                        color:'white',
                        fontSize:9
                    }
                    }
                ],
                series: [
                    {
                    name: '合格品数量',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        },
                    },
                    data: this.line2HourProduction.qualifiedNumber,
                    itemStyle: {
                        color: '#00FF7F' 
                    }
                    },
                    {
                    name: 'NG数量',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        },
                    },
                    data: this.line2HourProduction.noGoodNumber,
                    itemStyle: {
                        color: '#FFD700' 
                    }
                    },
                    {
                    name: '良率',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' %';
                        }
                    },
                    data: this.line2HourProduction.finePercent,
                    // lineStyle: {
                    //     color: '#FFD700' 
                    // },
                    itemStyle: {
                        color: '#1E90FF'
                    },
                    label: {
                        show: true,
                        position:'top',
                        fontSize: 8,
                        // fontWeight: 'bold',
                        color:'#FFFFFF',
                        formatter: '{c}%' // 显示百分比数值
                    }
                    },
                ]
            };
            this.myChart2.setOption(option);
        },
        updateChart3(){
            var element = document.getElementById('chart3');
            const listener = function() {
                echarts.init(element).resize()
            }
            EleResize.on(element, listener)
            const option = {
                grid: {
                    top:'28%',
                    bottom:'12%'
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(50, 50, 50, 0.7)', // 设置背景色为半透明黑色
                    borderColor: '#ccc', // 设置边框颜色
                    borderWidth: 1, // 设置边框宽度
                    // extraCssText: 'width: 10rem; height: 3.75rem;', // 设置宽度和高度
                    padding: [5, 10], // 设置内边距，数组中的两个值分别表示垂直和水平方向的内边距
                    textStyle: {
                        fontSize: 12, // 设置字体大小为.875rem
                        color: '#fff', // 设置字体颜色为白色
                        fontWeight:'bold'
                    },
                    position: function (point, params, dom, rect, size) {
                        // 自定义位置函数，可以根据需要返回位置信息
                        // point：鼠标位置
                        // params：数据项参数
                        // dom：tooltip的dom元素
                        // rect：图表的包含框
                        // size：视图大小
                        var viewWidth = size.viewSize[0];
                        var viewHeight = size.viewSize[1];
                        var boxWidth = dom.offsetWidth;
                        var boxHeight = dom.offsetHeight;
                        var posX = point[0];
                        var posY = point[1];
                        // 防止tooltip超出视图边界
                        if (posX + boxWidth > viewWidth) {
                            posX -= boxWidth + 10;
                        }
                        if (posY + boxHeight > viewHeight) {
                            posY -= boxHeight + 10;
                        }
                        // 可以根据需要调整位置逻辑
                        return [posX, posY];
                    }
                },
                toolbox: {
                    feature: {
                    dataView: { show: true, readOnly: false, backgroundColor: '#0d1543', 
                    textColor: 'white', textareaColor: '#0d1543', textareaBorderColor: 'silver' },
                    saveAsImage: { show: true, backgroundColor: 'rgba(41, 180, 227, 0.1)', name: '烘烤3线生产数据' },
                    myFull: {
                        show: true,
                        title: '全屏',
                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                        onclick: function () {
                            // 全屏查看
                            if (element.requestFullScreen) {
                                element.requestFullScreen();
                            } else if (element.msRequestFullscreen) {
                                element.msRequestFullScreen();
                            } else if (element.webkitRequestFullScreen) {
                                element.webkitRequestFullScreen();
                            } else if (element.mozRequestFullScreen) {
                                element.mozRequestFullScreen();
                            }
                            // 退出全屏
                            if (element.requestFullScreen) {
                                document.exitFullscreen()
                            } else if (element.msRequestFullScreen) {
                                document.msExitFullscreen()
                            } else if (element.webkitRequestFullScreen) {
                                document.webkitCancelFullScreen()
                            } else if (element.mozRequestFullScreen) {
                                document.mozCancelFullScreen()
                            }
                        }
                    }
                    },
                    iconStyle:{
                        borderColor: 'white',
                        // color: 'red'
                    },
                    emphasis:{
                        iconStyle:{
                            borderColor: '#00FFFF'
                        }
                    }
                },
                legend: {
                    // data: ['目标产能', '实际产能', '良率', 'OEE'],
                    textStyle:{
                        fontWeight:'bold',
                        color:'white',
                        // fontFamily: 'Arial',
                    },
                    top:'2%',
                    left:'5%'
                },
                xAxis: [
                    {
                    type: 'category',
                    data: this.line3HourProduction.hourHand,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        color:'white'
                    },
                    axisLine: {
                        lineStyle: {
                            color:'white'
                        }
                    }
                    }
                ],
                yAxis: [
                    {
                    type: 'value',
                    name: '产能',
                    nameTextStyle: {
                        color: 'white',
                        padding: -5
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    // min: 0,
                    // max: 250,
                    // interval: 50,
                    axisLabel: {
                        formatter: '{value} pcs',
                        margin:3,
                        color:'white',
                        fontSize:9
                    }
                    },
                    {
                    type: 'value',
                    name: '良率',
                    nameTextStyle: {
                        color: 'white',
                        padding: -5
                    },
                    splitLine:{
                        show:false
                    },
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value} %',
                        margin:3,
                        color:'white',
                        fontSize:9
                    }
                    }
                ],
                series: [
                    {
                    name: '合格品数量',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        },
                    },
                    data: this.line3HourProduction.qualifiedNumber,
                    itemStyle: {
                        color: '#00FF7F' 
                    }
                    },
                    {
                    name: 'NG数量',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' pcs';
                        },
                    },
                    data: this.line3HourProduction.noGoodNumber,
                    itemStyle: {
                        color: '#FFD700' 
                    }
                    },
                    {
                    name: '良率',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                        return value + ' %';
                        }
                    },
                    data: this.line3HourProduction.finePercent,
                    // lineStyle: {
                    //     color: '#FFD700' 
                    // },
                    itemStyle: {
                        color: '#1E90FF'
                    },
                    label: {
                        show: true,
                        position:'top',
                        fontSize: 8,
                        // fontWeight: 'bold',
                        color:'#FFFFFF',
                        formatter: '{c}%' // 显示百分比数值
                    }
                    },
                ]
            };
            this.myChart3.setOption(option);
        },
    }
}
</script>